import { Form } from 'antd';
import { CSSProperties, FC } from 'react';

interface FormItemProps {
  label?: string;
  children?: any;
  error?: string;
}

const style: CSSProperties = {
  color: 'deeppink',
  fontSize: 12,
  position: 'absolute',
  bottom: -22,
};

const FormItem: FC<FormItemProps> = (props) => {
  const { label, children: input, error } = props;

  return (
    <>
      <Form.Item
        label={label}
        style={{ marginBottom: 0, position: 'relative' }}
      >
        {input}
        <div style={style}>{error}</div>
      </Form.Item>
    </>
  );
};

export default FormItem;
